<template >
  <!-- <div class="navibox" v-for="(item,index) in list" :key="index"></div> -->
  <div class="navibox">
    <div class="navibtn">
      <van-popover
        v-model:show="showPopover"
        theme="dark"
        :actions="actions"
        placement="bottom-start"
      >
        <template #reference>
          <van-button class="vanbtn" type="primary"
            ><van-icon name="apps-o"
          /></van-button>
        </template>
      </van-popover>
    </div>
    <div class="mybtn">
      <van-icon name="contact" @click="personal" />
    </div>
  </div>
</template>
<script lang="ts" setup >
import { Toast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const showPopover = ref(false);
const actions = [{ text: "课程" }, { text: "消息" }];
const props = defineProps({
  list: {
    type: Array,
    defual: () => [],
  },
});
const personal = () => {
  Toast("你好~ "+localStorage.getItem("zyh_stu_name")+"同学!");
};
</script>

<style >
.navibox {
  margin-top:1px;
  height: 30px;
  display: flex;
  /* border: 1 solid  #bac3c8; */
  box-shadow: 1px 1px 1px 1px gray;
}

.vanbtn {
  height: 30px;
  width: 30px;
  border: 0px;
  color: #3f3d3a;
  font-size: 24px;
  background-color: #fff;
  margin-left: 5px;
}

.mybtn {
  padding-left: 300px;
  font-size: 24px;
  height: 24px;
  margin: 3px;
}
</style>